<script setup>
import {logout} from "@/net/index.js";
import router from "@/router/index.js";
import {DataAnalysis, PictureFilled, User, UserFilled} from "@element-plus/icons-vue";
import {reactive, onMounted, ref} from "vue";

function userLogout(){
  logout(()=> router.push('/'))
}

const menu = reactive([
  {
    id: '1',
    icon: DataAnalysis,
    title: '数据分析',
    router: 'dataAnalysis',
    SubClass: [] //是否有二级菜单
  } ,
  {
    id: '2',
    icon: UserFilled,
    title: '用户管理',
    router: '',
    SubClass: [
      {
        id: '2-1',
        title: '用户列表',
        router: 'account',
      },
      {
        id: '2-2',
        title: 'test1',
        router: 'test1',
      }
    ] //是否有二级菜单
  } ,
  {
    id: '3',
    icon: PictureFilled,
    title: '数据管理',
    router: '',
    SubClass: [
      {
        id: '3-1',
        title: '图片列表',
        router: 'tif',
      },
      {
        id: '3-2',
        title: 'test2',
        router: 'test2',
      }
    ] //是否有二级菜单
  } ,

])

const ac_index = ref('1')
function Select(index, path){
  localStorage.setItem('menuId', JSON.stringify(index))
}

onMounted(() => {
  ac_index.value = JSON.parse(localStorage.getItem('menuId'))
})


</script>

<template>
  <div>
    <!--  顶部-->

    <div class="sidebar-top">
        <div>涩图后台管理</div>
      <div @click="userLogout">退出</div>
    </div>
    <!--  左侧-->
    <div class="sidebar-cont" >
      <el-card style="height: 90%">
        <el-menu :default-active="ac_index" @select="Select">
          <div v-for="(item, index) in menu" :key="index">
            <router-link :to="{path:item.router}">
              <el-menu-item v-if="item.SubClass.length === 0" :index="item.id">
                <el-icon>
                  <component :is="item.icon"></component>
                </el-icon>
                <span>{{item.title}}</span>
              </el-menu-item>
            </router-link>

            <el-sub-menu v-if="item.SubClass.length > 0" :index="item.id">
              <template #title>
                <el-icon>
                  <component :is="item.icon"></component>
                </el-icon>
                <span>{{item.title}}</span>
              </template>
              <div v-for="(two, index_two) in item.SubClass" :key="index_two">
                <router-link :to="{path:two.router}">
                  <el-menu-item :index="two.id" >{{two.title}}</el-menu-item>
                </router-link>

              </div>
            </el-sub-menu>
          </div>
        </el-menu>
      </el-card>
    </div>
    <div>
      <router-view/>
    </div>
  </div>

</template>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active{
  text-decoration: none;
}
</style>